import React, { useEffect, useState, Key } from 'react'
import { Button, Form, Input, Card, Space, Table, Tooltip, message } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
// Table组件中用到的ts类型.由antd提供
import type { ColumnsType } from 'antd/es/table'
import { useNavigate } from 'react-router-dom'
import {
  IhospitalSets,
  IhospitalSet,
} from '@api/hospital/hospitalSet/model/hospitalSetTypes'
import {
  reqGetHospitalSets,
  reqDelHospitalSet,
  reqBatchDelHospitalSets,
} from '@api/hospital/hospitalSet'

let flag = false // false则不添加筛选条件,true则添加筛选条件

export default function HospitalSet() {
  // 编程式导航
  const navigate = useNavigate()
  // 创建form实例
  const [form] = Form.useForm()
  // 医院设置表格数据
  const [hospitalSets, setHospitalSets] = useState<IhospitalSets>([])
  // 分页相关的数据
  const [total, setTotal] = useState(0)
  const [pageSize, setPageSize] = useState(5)
  const [page, setPage] = useState(1)
  // 获取表格数据展示loading的状态
  const [loading, setLoading] = useState(false)

  // 存储选中数据的id
  const [ids, setIds] = useState<Key[]>([])
  useEffect(() => {
    getHospitalSets(page, pageSize)
  }, [])

  async function getHospitalSets(page: number, pageSize: number) {
    setLoading(true)
    let result
    //判断flag是true还是false, 如果是true则添加筛选,如果是false则不添加筛选
    if (flag) {
      // 想办法获取到hosname和hoscode
      // 1. Form.useForm() 返回一个form实例对象
      // 2. 使用form实例和要操作的Form组件进行绑定
      // 3. 调用form实例的方法去操作对应的Form组件
      const { hosname, hoscode } = form.getFieldsValue()

      result = await reqGetHospitalSets(page, pageSize, hosname, hoscode)
    } else {
      result = await reqGetHospitalSets(page, pageSize)
    }

    setHospitalSets(result.records)
    setTotal(result.total)
    setLoading(false)
  }
  const onFinish = (values: any) => {
    flag = true
    setPage(1)
    getHospitalSets(1, pageSize)
  }

  const columns: ColumnsType<IhospitalSet> = [
    {
      title: '序号', //控制这一列的表头信息
      // 如果不写render,则dataIndex直接决定这一列渲染什么
      // 如果写了render.则dataIndex只会影响到render中第一个形参.不决定渲染什么
      // dataIndex: 'age',
      // key: 'name', // Table组件中列表渲染中用到的key.我们的项目中不会使用,会用其他方式解决
      // render是一个函数,这个函数的返回值什么,则这一列就渲染什么
      // render: (a, b, c) => {
      //   // a 的值,如果没写dataIndex,则a的值和b一样也是数据对象.如果dataIndex写了. 如果dataIndex写了,则a的值就是数据对象中dataIndex所对应的那个属性的值
      //   // b 的值是固定的,永远都是dataSource对应的数组中的数据对象
      //   // c 也是固定的,永远是下标
      //   console.log(a, b, c)
      //   return '啊哈哈哈哈'
      // },
      render: (a, b, index) => index + 1,
      width: 80, //控制这一列的宽度
      align: 'center', //让这一列的文本水平居中
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone',
    },

    {
      title: '操作',
      render: (_, record) => (
        <Space size="middle">
          <Tooltip title="修改医院">
            <Button
              icon={<EditOutlined />}
              type="primary"
              onClick={() => {
                navigate(`/syt/hospital/hospitalSet/update/${_.id}`)
              }}
            ></Button>
          </Tooltip>
          <Tooltip title="删除医院">
            <Button
              icon={<DeleteOutlined />}
              type="primary"
              danger
              onClick={async () => {
                // 发送请求
                await reqDelHospitalSet(_.id)
                //提示用户
                message.success('删除成功')
                //更新表格
                getHospitalSets(page, pageSize)
              }}
            ></Button>
          </Tooltip>
        </Space>
      ),
      fixed: 'right', //这一列固定在表格的右侧
      width: 120,
    },
  ]
  return (
    <Card>
      {/* 让表单中的每一个表单元素水平布局.则在Form组件上写属性layout,值为inline */}
      <Form
        onChange={() => {
          // 当前表单中任何一个表单元素的值被修改了, 则这个回调触发
          // console.log(111)
          flag = false
        }}
        // 绑定form实例和Form组件
        form={form}
        layout="inline"
        name="basic"
        // 提示文本在一行中占8份. 共24份
        // labelCol={{ span: 8 }}
        // 表单元素这一列占16份
        // wrapperCol={{ span: 16 }}
        // 设置表单中的初始值
        // initialValues={{ remember: false }}
        // 当我们点击表单中的提交按钮,会进行表单校验,校验成功,则触发onFinish.
        onFinish={onFinish}
        // 当我们点击表单中的提交按钮,会进行表单校验,校验不成功,则触发onFinishFailed.
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          // label="xxx" // 当前表单元素的描述文本
          name="hosname"
          // 当前表单元素的校验规则
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item
          name="remember"
          valuePropName="checked"
          // offset是指偏移多少份
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item>
          {/* Button组件有htmlType="submit"则这个按钮就是当前表单的提交按钮 */}
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            type="default"
            style={{ marginLeft: 10 }}
            onClick={() => {
              flag = false
              // 清空表单内容
              form.setFieldsValue({ hosname: undefined, hoscode: undefined })
              // 发送请求
              getHospitalSets(1, pageSize)
              setPage(1)
            }}
          >
            清空
          </Button>
        </Form.Item>
      </Form>

      <Space style={{ marginTop: 20, marginBottom: 20 }}>
        <Button
          type="primary"
          onClick={() => {
            navigate(`/syt/hospital/hospitalSet/add`)
          }}
        >
          添加
        </Button>
        <Button
          type="primary"
          danger
          disabled={!ids.length}
          onClick={async () => {
            await reqBatchDelHospitalSets(ids)
            message.success('批量删除成功')
            getHospitalSets(page, pageSize)
          }}
        >
          批量删除
        </Button>
      </Space>
      {/* 
      columns: 决定了这个表格中有多少列,每一列的表头写的是什么
      dataSource 决定了这个表格中展示什么数据
      bordered 给表格加边框
      scroll 让Table支持滚动
      */}
      <Table
        loading={loading}
        columns={columns}
        dataSource={hospitalSets}
        bordered
        scroll={{
          x: 1500,
        }}
        // 让table使用每一条数据的id作为列表渲染的key值
        rowKey="id"
        pagination={{
          total, // 数据总数
          current: page, // 控制对应的页码高亮
          pageSize, // 一页多少条
          showSizeChanger: true, // 展示控制一页多少条的下拉框
          pageSizeOptions: [2, 5, 10], //动态控制下拉框的选项
          showQuickJumper: true, //展示快速跳转
          showTotal: (total) => {
            return `总共${total}条`
          },
          // 只要点击分页器中的某个按钮或选项,这个事件就会触发
          onChange(page, pageSize) {
            // page 当前点击之后选择的页数
            // pageSize 当前点击之后选择的一页多少条
            setPage(page)
            setPageSize(pageSize) //异步的
            // 发送请求获取数据
            // 注意: 这里的值一定是当前事件的形参page和pageSize
            getHospitalSets(page, pageSize)
          },
        }}
        // 写了这个属性,表格中就会展示复选框
        rowSelection={{
          onChange(selectedRowKeys, selectedRows) {
            // console.log(selectedRowKeys, selectedRows)
            setIds(selectedRowKeys)
          },
        }}
      />
    </Card>
  )
}
